<template>
    <el-dialog :visible.sync="visible" title="资料上传" :close-on-click-modal="false" top="20"
               :close-on-press-escape="false" append-to-body width="80%">
        <el-form :model="dataForm" ref="dataForm" :rules="dataRule" @keyup.enter.native="dataFormSubmitHandle()"
                 label-width="165px">
            <el-row>
                <el-form-item prop="fileList">
                    <span slot="label"><i class="el-icon-star-on" style="color: red"/>当事人身份证明资料:</span>
                    <el-upload
                            :action="uploadUrl()"
                            :headers="headers()"
                            :data="uploadForm1"
                            :multiple="true"
                            :show-file-list="false"
                            :file-list="fileList1"
                            accept=".jpg,.jpeg,.png,.JPG,.JPEG"
                            :on-preview="handlePictureCardPreview"
                            :on-change="handleChange"
                            :on-success="handleSuccess"
                            :before-upload="beforeUpload"
                            :on-remove="handleRemove">
                        <el-button slot="trigger" size="small" icon="el-icon-plus" type="primary">选取文件</el-button>
                    </el-upload>
                </el-form-item>
            </el-row>
            <el-row :gutter="10" style="padding-right: 20px; padding-left: 20px;">
<!--                <el-col :span="3" class="main_div" v-for="(item,index) in uploadedFileList1" :key="index">-->
<!--                    <el-image :src="item.ossFilePath" fit="fill" style="width: 110px; height: 110px;" :preview-src-list="getPreviewImageUrlList(uploadedFileList1)"></el-image>-->
<!--                    <div class="float_del_div">-->
<!--                        <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="toDeleteContractDatumFile(item)" ></el-button>-->
<!--                    </div>-->
<!--                </el-col>-->
                <template v-for="(item,index) in uploadedFileList1">
                    <el-col :span="3" class="main_div" v-if="item.type === 1">
                        <el-image :src="item.ossFilePath" fit="fill" style="width: 110px; height: 110px;" :preview-src-list="getPreviewImageUrlList(uploadedFileList1)"></el-image>
                        <div class="float_del_div">
                            <el-button type="danger" icon="el-icon-delete" size="mini" circle  @click="toDeleteContractDatumFile(item)" ></el-button>
                        </div>
                    </el-col>
                    <el-col :span="3" class="main_div" v-else-if="item.type === 2">
                        <div style="width: 100%; height: 100%; display: inline-block; margin-top: 40px;" >{{item.fileName}}</div>
                        <div class="float_del_div">
                            <el-button type="danger" icon="el-icon-delete" size="mini" circle  @click="toDeleteContractDatumFile(item)" ></el-button>
                        </div>
                    </el-col>
                </template>
            </el-row>
            <el-divider style="margin-bottom: 2px; margin-top: 2px;"/>
            <el-row>
                <el-form-item prop="fileList">
                    <span slot="label"><i class="el-icon-star-on" style="color: red"/>当事人抵押物资料:</span>
                    <el-upload
                            :action="uploadUrl()"
                            :headers="headers()"
                            :data="uploadForm2"
                            :multiple="true"
                            :show-file-list="false"
                            :file-list="fileList2"
                            :on-preview="handlePictureCardPreview"
                            :on-change="handleChange"
                            :on-success="handleSuccess"
                            :before-upload="beforeUpload"
                            :on-remove="handleRemove">
                        <el-button slot="trigger" size="small" icon="el-icon-plus" type="primary">选取文件</el-button>
                    </el-upload>
                </el-form-item>
            </el-row>
            <el-row :gutter="10" style="padding-right: 20px; padding-left: 20px;">
                <template v-for="(item,index) in uploadedFileList2">
                    <el-col :span="3" class="main_div" v-if="item.type === 1">
                        <el-image :src="item.ossFilePath" fit="fill" style="width: 110px; height: 110px;" :preview-src-list="getPreviewImageUrlList(uploadedFileList2)"></el-image>
                        <div class="float_del_div">
                            <el-button type="danger" icon="el-icon-delete" size="mini" circle  @click="toDeleteContractDatumFile(item)" ></el-button>
                        </div>
                    </el-col>
                    <el-col :span="3" class="main_div" v-else-if="item.type === 2">
                        <div style="width: 100%; height: 100%; display: inline-block; margin-top: 40px;" >{{item.fileName}}</div>
                        <div class="float_del_div">
                            <el-button type="danger" icon="el-icon-delete" size="mini" circle  @click="toDeleteContractDatumFile(item)" ></el-button>
                        </div>
                    </el-col>
                </template>

            </el-row>
            <el-divider style="margin-bottom: 2px; margin-top: 2px;"/>
            <el-row>
            <el-form-item prop="fileList">
                <span slot="label"><i class="el-icon-star-on" style="color: red"/>放款凭证:</span>
                <el-upload
                        :action="uploadUrl()"
                        :headers="headers()"
                        :data="uploadForm3"
                        :multiple="true"
                        :show-file-list="false"
                        :on-preview="handlePictureCardPreview"
                        :on-change="handleChange"
                        :on-success="handleSuccess"
                        :file-list="fileList3"
                        :before-upload="beforeUpload"
                        :on-remove="handleRemove">
                    <el-button slot="trigger" size="small" icon="el-icon-plus" type="primary">选取文件</el-button>
                </el-upload>
            </el-form-item>
            </el-row>
            <el-row :gutter="10" style="padding-right: 20px; padding-left: 20px;">
                <template v-for="(item,index) in uploadedFileList3">
                    <el-col :span="3" class="main_div" v-if="item.type === 1">
                        <el-image :src="item.ossFilePath" fit="fill" style="width: 110px; height: 110px;" :preview-src-list="getPreviewImageUrlList(uploadedFileList3)"></el-image>
                        <div class="float_del_div">
                            <el-button type="danger" icon="el-icon-delete" size="mini" circle  @click="toDeleteContractDatumFile(item)" ></el-button>
                        </div>
                    </el-col>
                    <el-col :span="3" class="main_div" v-else-if="item.type === 2">
                        <div style="width: 100%; height: 100%; display: inline-block; margin-top: 40px;" >{{item.fileName}}</div>
                        <div class="float_del_div">
                            <el-button type="danger" icon="el-icon-delete" size="mini" circle  @click="toDeleteContractDatumFile(item)" ></el-button>
                        </div>
                    </el-col>
                </template>
            </el-row>
            <el-divider style="margin-bottom: 2px; margin-top: 2px;"/>
            <el-row>
            <el-form-item prop="fileList" label="补充协议:">
                <el-upload
                        :action="uploadUrl()"
                        :headers="headers()"
                        :data="uploadForm4"
                        :multiple="true"
                        :show-file-list="false"
                        :before-upload="beforeUpload"
                        :on-preview="handlePictureCardPreview"
                        :on-change="handleChange"
                        :on-success="handleSuccess"
                        :file-list="fileList4"
                        :on-remove="handleRemove">
                    <el-button slot="trigger" size="small" icon="el-icon-plus" type="primary">选取文件</el-button>
                </el-upload>
            </el-form-item>
            </el-row>
            <el-row :gutter="10" style="padding-right: 20px; padding-left: 20px;">
                <template v-for="(item,index) in uploadedFileList4">
                    <el-col :span="3" class="main_div" v-if="item.type === 1">
                        <el-image :src="item.ossFilePath" fit="fill" style="width: 110px; height: 110px;" :preview-src-list="getPreviewImageUrlList(uploadedFileList4)"></el-image>
                        <div class="float_del_div">
                            <el-button type="danger" icon="el-icon-delete" size="mini" circle  @click="toDeleteContractDatumFile(item)" ></el-button>
                        </div>
                    </el-col>
                    <el-col :span="3" class="main_div" v-else-if="item.type === 2">
                        <div style="width: 100%; height: 100%; display: inline-block; margin-top: 40px;" >{{item.fileName}}</div>
                        <div class="float_del_div">
                            <el-button type="danger" icon="el-icon-delete" size="mini" circle  @click="toDeleteContractDatumFile(item)" ></el-button>
                        </div>
                    </el-col>
                </template>
            </el-row>
            <el-divider style="margin-bottom: 2px; margin-top: 2px;"/>
            <el-row>
            <el-form-item prop="fileList" label="申请资料:">
                <el-upload
                        :action="uploadUrl()"
                        :headers="headers()"
                        :data="uploadForm5"
                        :multiple="true"
                        :show-file-list="false"
                        :file-list="fileList5"
                        :before-upload="beforeUpload"
                        :on-preview="handlePictureCardPreview"
                        :on-change="handleChange"
                        :on-success="handleSuccess"
                        :on-remove="handleRemove">
                    <el-button slot="trigger" size="small" icon="el-icon-plus" type="primary">选取文件</el-button>
                </el-upload>
            </el-form-item>
            </el-row>
            <el-row :gutter="10" style="padding-right: 20px; padding-left: 20px;">
                <template v-for="(item,index) in uploadedFileList5">
                    <el-col :span="3" class="main_div" v-if="item.type === 1">
                        <el-image :src="item.ossFilePath" fit="fill" style="width: 110px; height: 110px;" :preview-src-list="getPreviewImageUrlList(uploadedFileList5)"></el-image>
                        <div class="float_del_div">
                            <el-button type="danger" icon="el-icon-delete" size="mini" circle  @click="toDeleteContractDatumFile(item)" ></el-button>
                        </div>
                    </el-col>
                    <el-col :span="3" class="main_div" v-else-if="item.type === 2">
                        <div style="width: 100%; height: 100%; display: inline-block; margin-top: 40px;" >{{item.fileName}}</div>
                        <div class="float_del_div">
                            <el-button type="danger" icon="el-icon-delete" size="mini" circle  @click="toDeleteContractDatumFile(item)" ></el-button>
                        </div>
                    </el-col>
                </template>
            </el-row>
            <el-divider style="margin-bottom: 2px; margin-top: 2px;"/>
            <el-row>
            <el-form-item prop="fileList" label="其它资料:">
                <el-upload
                        :action="uploadUrl()"
                        :headers="headers()"
                        :data="uploadForm6"
                        :multiple="true"
                        :show-file-list="false"
                        :file-list="fileList6"
                        :before-upload="beforeUpload"
                        :on-preview="handlePictureCardPreview"
                        :on-change="handleChange"
                        :on-success="handleSuccess"
                        :on-remove="handleRemove">
                    <el-button slot="trigger" size="small" icon="el-icon-plus" type="primary">选取文件</el-button>
                </el-upload>
            </el-form-item>
            </el-row>
            <el-row :gutter="10" style="padding-right: 20px; padding-left: 20px;">
                <template v-for="(item,index) in uploadedFileList6">
                    <el-col :span="3" class="main_div" v-if="item.type === 1">
                        <el-image :src="item.ossFilePath" fit="fill" style="width: 110px; height: 110px;" :preview-src-list="getPreviewImageUrlList(uploadedFileList6)"></el-image>
                        <div class="float_del_div">
                            <el-button type="danger" icon="el-icon-delete" size="mini" circle  @click="toDeleteContractDatumFile(item)" ></el-button>
                        </div>
                    </el-col>
                    <el-col :span="3" class="main_div" v-else-if="item.type === 2">
                        <div style="width: 100%; height: 100%; display: inline-block; margin-top: 40px;" >{{item.fileName}}</div>
                        <div class="float_del_div">
                            <el-button type="danger" icon="el-icon-delete" size="mini" circle  @click="toDeleteContractDatumFile(item)" ></el-button>
                        </div>
                    </el-col>
                </template>
            </el-row>
            <el-divider style="margin-bottom: 2px; margin-top: 2px;"/>
            <el-form-item prop="remark" label="资料上传状态">
                <el-switch
                        v-model="dataForm.uploadStatus"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-value="1"
                        inactive-value="0"
                        active-text="已完成"
                        inactive-text="未完成">
                </el-switch>
                <label style="margin-left: 20px; color: red;"><i class="el-icon-star-on"/> 完成后不能再提交资料</label>
            </el-form-item>
<!--            <el-form-item prop="remark" :label="$t('dict.remark')">-->
<!--                <el-input v-model="dataForm.remark" :placeholder="$t('dict.remark')" type="textarea" :rows="3"/>-->
<!--            </el-form-item>-->
        </el-form>
        <template slot="footer">
            <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
            <el-button type="primary" @click="dataFormSubmitHandle">{{ $t('submit') }}</el-button>
        </template>
    </el-dialog>
</template>

<script>
    import {debounce} from 'lodash'
    import Cookies from 'js-cookie'
    import {compress, compressAccurately} from 'image-conversion';
    let tokenStr = Cookies.get('token');

    export default {
        data() {
            return {
                visible: false,
                inactiveValue: 0,
                activeValue: 1,
                fileList: [],
                fileList1: [],
                fileList2: [],
                fileList3: [],
                fileList4: [],
                fileList5: [],
                fileList6: [],
                uploadedFileList1: [],
                uploadedFileList2: [],
                uploadedFileList3: [],
                uploadedFileList4: [],
                uploadedFileList5: [],
                uploadedFileList6: [],
                fileTypeOptions: [],
                contractDatumDeleteURL: '/manager/contractDatum/delete',
                attrs: {
                    accept: 'image/*'
                },
                dataForm: {
                    id: 0,
                    fileType: '',
                    uploadStatus: "0",
                    contractId: this.contractId,
                    remark: ''
                },
                uploadForm1: {//当事人身份证明资料, 当事人抵押物资料, 放款凭证, 补充协议,申请资料,其它资料
                    type: '当事人身份证明资料',
                    contractId: this.contractId,
                },
                uploadForm2: {
                    type: '当事人抵押物资料',
                    contractId: this.contractId,
                },
                uploadForm3: {
                    type: '放款凭证',
                    contractId: this.contractId,
                },
                uploadForm4: {
                    type: '补充协议',
                    contractId: this.contractId,
                },
                uploadForm5: {
                    type: '申请资料',
                    contractId: this.contractId,
                },
                uploadForm6: {
                    type: '其它资料',
                    contractId: this.contractId,
                },
                dialogImageUrl: '',
                dialogVisible: false
            }
        },
        props: {
            contractId: {
                type: Number
            }
        },
        computed: {
            dataRule() {
                return {
                    fileType: [
                        {required: true, message: '请选择资料类型', trigger: 'blur'}
                    ]
                }
            }
        },
        created() {

        },
        methods: {
            init: function () {
                this.uploadedFileList1= [];
                this.uploadedFileList2= [];
                this.uploadedFileList3= [];
                this.uploadedFileList4= [];
                this.uploadedFileList5= [];
                this.uploadedFileList6= [];
                this.visible = true
                this.getContractUploadedDatumList()
                this.$nextTick(() => {
                    this.$refs['dataForm'].resetFields()
                    if (this.dataForm.id) {
                        this.getInfo()
                    }
                })
            },
            headers: function () {
                return {
                    'token': tokenStr
                }
            },
            uploadUrl: function () {
                return process.env.VUE_APP_API + "/manager/file/uploadContractDatum"
            },
            submitUpload: function () {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleRemove: function (file, fileList) {
                // this.fileList = fileList;
            },
            handlePreview: function (file) {
                console.log(file);
            },
            handleSuccess: function (response, file, fileList) {
                // this.$refs.upload.clearFiles();//当事人身份证明资料, 当事人抵押物资料, 放款凭证, 补充协议,申请资料,其它资料
                // this.visible = false
                if (response.code === 100) {
                    // if (response.data.type === "当事人身份证明资料") {
                    //     file.url = file.response.data.fileUrl;
                    //     file.type = response.data.type;
                    //     this.fileList1 = fileList;
                    // } else if (response.data.type === "当事人抵押物资料") {
                    //     file.url = file.response.data.fileUrl;
                    //     file.type = response.data.type;
                    //     this.fileList2 = fileList;
                    // } else if (response.data.type === "放款凭证") {
                    //     file.url = file.response.data.fileUrl;
                    //     file.type = response.data.type;
                    //     this.fileList3 = fileList;
                    // } else if (response.data.type === "补充协议") {
                    //     file.url = file.response.data.fileUrl;
                    //     file.type = response.data.type;
                    //     this.fileList4 = fileList;
                    // } else if (response.data.type === "申请资料") {
                    //     file.url = file.response.data.fileUrl;
                    //     file.type = response.data.type;
                    //     this.fileList5 = fileList;
                    // } else if (response.data.type === "其它资料") {
                    //     file.type = response.data.type;
                    //     file.url = file.response.data.fileUrl;
                    //     this.fileList6 = fileList;
                    // }
                    let contractDatum = response.data;
                    if (contractDatum.datumType === "当事人身份证明资料") {
                        this.uploadedFileList1.push(contractDatum);
                    } else if (contractDatum.datumType === "当事人抵押物资料") {
                        this.uploadedFileList2.push(contractDatum);
                    } else if (contractDatum.datumType === "放款凭证") {
                        this.uploadedFileList3.push(contractDatum);
                    } else if (contractDatum.datumType === "补充协议") {
                        this.uploadedFileList4.push(contractDatum);
                    } else if (contractDatum.datumType === "申请资料") {
                        this.uploadedFileList5.push(contractDatum);
                    } else if (contractDatum.datumType === "其它资料") {
                        this.uploadedFileList6.push(contractDatum);
                    }
                }

            },
            //获取图片预览链接
            getPreviewImageUrlList: function(fileList){
                let preImgs = [];
                for (let item in fileList){
                    preImgs.push(fileList[item].ossFilePath);
                }
                return preImgs;
            },
            //获取已上传的图片列表
            getContractUploadedDatumList: function () {
                let that = this;
                let contractDatumParams =  {
                        order: 'ASC',
                        orderField: 'createTime',
                        current: 1,
                        size: -1,
                        listMode:true,
                        queryItems: []
                };
                let contractDatumQueryItems = [{
                        field: 'contractId',
                        as: 'EQ',
                        value: this.contractId
                    }];
                contractDatumParams.queryItems = this.createQueryParams(contractDatumQueryItems)
                this.$http.get('/manager/contractDatum/page', contractDatumParams).then(res => {
                    let contractDatumList = res.records;
                    for (let item in contractDatumList) {
                        let contractDatum = contractDatumList[item];
                        if (contractDatum.datumType === "当事人身份证明资料") {
                            that.uploadedFileList1.push(contractDatum);
                        } else if (contractDatum.datumType === "当事人抵押物资料") {
                            that.uploadedFileList2.push(contractDatum);
                        } else if (contractDatum.datumType === "放款凭证") {
                            that.uploadedFileList3.push(contractDatum);
                        } else if (contractDatum.datumType === "补充协议") {
                            that.uploadedFileList4.push(contractDatum);
                        } else if (contractDatum.datumType === "申请资料") {
                            that.uploadedFileList5.push(contractDatum);
                        } else if (contractDatum.datumType === "其它资料") {
                            that.uploadedFileList6.push(contractDatum);
                        }
                    }
                }).catch(() => {
                })
            },
            //删除上传文件
            toDeleteContractDatumFile:function(item){
                let id = item.id;
                let that = this;
                this.$confirm(this.$t('prompt.info', {'handle': this.$t('delete')}), this.$t('prompt.title'), {
                    confirmButtonText: this.$t('confirm'),
                    cancelButtonText: this.$t('cancel'),
                    type: 'warning'
                }).then(() => {
                    this.$axios.delete(
                        `${this.contractDatumDeleteURL}`,
                        {'data': [id]}
                    ).then(res => {
                        if (item.datumType === "当事人身份证明资料") {
                            that.uploadedFileList1.remove(item);
                        } else if (item.datumType === "当事人抵押物资料") {
                            that.uploadedFileList2.remove(item);
                        } else if (item.datumType === "放款凭证") {
                            that.uploadedFileList3.remove(item);
                        } else if (item.datumType === "补充协议") {
                            that.uploadedFileList4.remove(item);
                        } else if (item.datumType === "申请资料") {
                            that.uploadedFileList5.remove(item);
                        } else if (item.datumType === "其它资料") {
                            that.uploadedFileList6.remove(item);
                        }

                        this.$message({
                            message: this.$t('prompt.success'),
                            type: 'success',
                            duration: 500,
                            onClose: () => {
                                that.uploadedFileList1= [];
                                that.uploadedFileList2= [];
                                that.uploadedFileList3= [];
                                that.uploadedFileList4= [];
                                that.uploadedFileList5= [];
                                that.uploadedFileList6= [];
                                that.getContractUploadedDatumList()
                            }
                        })
                    }).catch(() => {
                    })
                }).catch(() => {
                })
            },
            //查询条件构造器
            createQueryParams(queryItems){
                let queryParams = ''
                if(queryItems.length > 0){
                    for (let i = 0; i < queryItems.length; i++) {
                        let queryItem = queryItems[i]
                        queryParams = queryParams + queryItem.field + ',' + queryItem.as + ',' + queryItem.value + ';'
                    }
                }
                return queryParams
            },
            // 方法判断
            handleChange: function (file, fileList) {
                // 拿到当前上传图片的name，判断其后缀名是否符合
                let type = this.isImage(file.name)||this.isPdf(file.name);
                console.log(type);
                // this.fileList = fileList;
                // let fileLength = this.fileList.length;
                if (!type) {
                    // 若不符合图片类型，则让当前上传的文件去除掉即可，即从上传对列删除本次上传
                    // this.fileList.splice(fileLength - 1, 1);
                    this.$message.error('只允许上传图片');
                    return false;
                }
                return true;
            },
            beforeUpload (file) { return new Promise((resolve, reject) => {
                if(this.isImage(file.name)){//如果是图片就压缩
                    let isLt2M = file.size / 1024 / 1024 < 1 // 判定图片大小是否小于1MB
                    if (isLt2M) {
                        resolve(file)
                    }
                    console.log(file) // 压缩到1024KB,这里的1024就是要压缩的大小,可自定义
                    compressAccurately(file, 1024).then(res => { // console.log(res)
                        resolve(res)
                    })
                }else{
                    resolve(file)
                }

            })
            },
            // 封装一个判断图片文件后缀名的方法
            isImage: function (fileName) {
                if (typeof fileName !== 'string') return;
                let name = fileName.toLowerCase();
                return name.endsWith('.png') || name.endsWith('.jpeg') || name.endsWith('.jpg') || name.endsWith('.JPG') || name.endsWith('.JPEG') || name.endsWith('.bmp');
            },
            // 封装一个判断图片文件后缀名的方法
            isPdf: function (fileName) {
                if (typeof fileName !== 'string') return;
                let name = fileName.toLowerCase();
                return name.endsWith('.pdf');
            },
            // 获取信息
            getInfo: function () {
                this.$axios.get(`/manager/contractDatum/info/${this.dataForm.id}`).then(res => {
                    this.dataForm = {
                        ...this.dataForm,
                        ...res
                    }
                }).catch(() => {
                })
            },
            // 表单提交
            dataFormSubmitHandle: function () {
                let that = this;
                this.$refs['dataForm'].validate((valid) => {
                    if (!valid) {
                        return false
                    }

                    if (that.uploadedFileList1.length === 0||that.uploadedFileList2.length === 0||that.uploadedFileList3.length === 0) {
                        this.$message.error("请选择必要的文件上传后提交")
                        return false;
                    }
                    this.$http.post('/manager/contractDatum/updateContractDatumStatus', that.dataForm).then(res => {
                        this.$message({
                            message: this.$t('prompt.success'),
                            type: 'success',
                            duration: 500,
                            onClose: () => {
                                this.visible = false;
                                this.$emit('refreshDataList');
                            }
                        })
                    }).catch(() => {
                    })
                })
            }
        }
    }
</script>
<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }

    .el-upload--picture-card {
        width: 100px;
        height: 100px;
        line-height: 100px;
    }

    .el-upload-list__item-actions {
        width: 100px;
        height: 100px;
    }

    .el-upload-list--picture-card .el-upload-list__item {
        width: 100px;
        height: 100px;
    }

    .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
        white-space: nowrap;
    }


    .main_div {
        position: relative;
        width: 120px;
        height: 120px;
        padding: 2px;
        display: inline-block;
        border: 1px solid #ABABAB;
        border-radius: 5px;
        margin-right: 8px;
        margin-bottom: 8px;
    }

    .float_del_div {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 30px;
        height: 30px;
        z-index: 100;
    }

</style>
